<template>
  <div class="main">
    <div class="tan_chuang">
      <!-- 搜索部分 -->
      <div class="main-el-row-header">
        <div class="header-title">
          <div class="hang_title">
            <div class="one_title">天基环境载荷数据</div>
            <div class="you"></div>
          </div>
        </div>
        <div class="header-content">
          <div class="form_div">
            <div>时间范围：</div>
            <div>
              <el-date-picker
                value-format="yyyy-MM-dd hh:mm:ss"
                v-model="form.setTime"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </div>
            <div style="text-align: center">至</div>
            <div>
              <el-date-picker
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd hh:mm:ss"
                type="datetime"
                v-model="form.endTime"
              ></el-date-picker>
            </div>
          </div>
          <div>
            <el-button
              size="small"
              @click="searchInfo()"
              type="primary"
              style="margin-left: 5px"
              class="bg_button"
              >搜 索</el-button
            >
            <el-button
              size="small"
              @click="resettingInfo()"
              type="primary"
              style="margin-left: 5px"
              class="bg_button"
              >重置</el-button
            >
          </div>
          <div class="btnzu">
            <div class="footer_left">
              <div>
                <el-button
                  class="bg_add"
                  type="primary"
                  icon="el-icon-plus"
                  plain
                  @click="add"
                  >新增</el-button
                >
              </div>
              <div>
                <el-button
                  class="bg_dao"
                  type="warning"
                  icon="el-icon-download"
                  plain
                  >导出</el-button
                >
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 列表 -->
      <div class="main-el-row-content">
        <el-table
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          :data="showData"
          style="width: 100%"
          class="my-table"
          height="620px"
          :header-cell-style="{ color: '#84F2FF' }"
          :cell-style="{ color: '#84F2FF' }"
          ref="multipleTable"
          :cell-class-name="tableCellClassName"
        >
          <!-- <el-table-column type="selection" width="55" align="left">
          </el-table-column> -->
          <el-table-column
            prop="dayHhmmss"
            width="200"
            label="北京时间"
            align="left"
          >
          </el-table-column>
          <!-- <el-table-column prop="utc" width="250" label="世界时间" align="left">
          </el-table-column> -->
          <el-table-column prop="lon" width="100" label="精度(°)" align="left">
            <template slot-scope="scope">
              <el-tooltip class="item" :content="scope.row.lon + ''">
                <span>{{ scope.row.lon.toFixed(2) }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="lat" width="100" label="纬度(°)" align="left">
            <template slot-scope="scope">
              <el-tooltip class="item" :content="scope.row.lat + ''">
                <span>{{ scope.row.lat.toFixed(2) }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="alt" width="100" label="高度(m)" align="left">
            <template slot-scope="scope">
              <el-tooltip class="item" :content="scope.row.alt + ''">
                <span>{{ scope.row.alt.toFixed(2) }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            prop="electronflag"
            width="100"
            label="电子标签"
            align="left"
          >
          </el-table-column>
          <el-table-column
            prop="flag"
            width="100"
            label="数据标签"
            align="left"
          >
          </el-table-column>
          <el-table-column
            prop="protonflag"
            width="100"
            label="质子标签"
            align="left"
          >
          </el-table-column>
          <el-table-column
            label="高能电子(Particles·cm⁻²·s⁻¹·sr⁻¹)"
            align="center"
          >
            <el-table-column prop="e1" width="130" label="0.2-0.3MeV">
            </el-table-column>
            <el-table-column prop="e2" width="130" label="0.3-0.4MeV">
            </el-table-column>
            <el-table-column prop="e3" width="130" label="0.4-0.5MeV">
            </el-table-column>
            <el-table-column prop="e4" width="130" label="0.5-0.6MeV">
            </el-table-column>
            <el-table-column prop="e5" width="130" label="0.6-0.8MeV">
            </el-table-column>
            <el-table-column prop="e6" width="130" label="0.8-1.0MeV">
            </el-table-column>
          </el-table-column>
          <el-table-column
            label="高能质子(Particles·cm⁻²·s⁻¹·sr⁻¹)"
            align="center"
            width="550"
          >
            <el-table-column prop="p1" width="130" label="4-9MeV">
            </el-table-column>
            <el-table-column prop="p2" width="130" label="5-15MeV">
            </el-table-column>
            <el-table-column prop="p3" width="130" label="15-40MeV">
            </el-table-column>
            <el-table-column prop="p4" width="130" label="40-80MeV">
            </el-table-column>
            <el-table-column prop="p5" width="130" label="80-165MeV">
            </el-table-column>
            <el-table-column prop="p6" width="130" label=">165MeV">
            </el-table-column>
          </el-table-column>
          <el-table-column label="操作" align="center" width="100">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="update(scope.row, 'edit')"
                size="small"
                ><span class="el-icon-edit">编辑</span></el-button
              >
              <el-button
                type="text"
                @click="deletes(scope.row, 'delete')"
                size="small"
                style="color: #fe2e64"
                ><span class="el-icon-delete">删除</span></el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="div-el-pagination">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-size="pageSize"
            background
            layout="prev, pager, next, total, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 增 -->
    <div class="add">
      <el-dialog :visible.sync="dialogAdd" width="1047px" height="395px">
        <div slot="title" class="dialog-title">
          <el-row class="red">
            <span class="dialog-title-text">新增</span>
            <span class="dialog-title-you"></span>
            <!-- <el-button type="primary" style="float:right" @click="edit_pr">编辑</el-button> -->
          </el-row>
        </div>
        <el-form :model="formAdd" label-width="120px" ref="form">
          <div class="form_time">
            <el-form-item label="世界时间" prop="utc">
              <el-date-picker
                v-model="formAdd.utc"
                type="datetime"
                placeholder="选择日期时间"
                default-time="12:00:00"
                @blur="addTime"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="北京时间" prop="dayHhmmss">
              <el-input v-model="formAdd.dayHhmmss"></el-input>
            </el-form-item>
          </div>
          <div class="form_coordinate">
            <el-form-item label="精度(°)" prop="lon">
              <el-input v-model="formAdd.lon"></el-input>
            </el-form-item>
            <el-form-item label="纬度(°)" prop="lat">
              <el-input v-model="formAdd.lat"></el-input>
            </el-form-item>
            <el-form-item label="高度(m)" prop="alt">
              <el-input v-model="formAdd.alt"></el-input>
            </el-form-item>
          </div>
          <div class="form_electron">
            <div class="title_table">高能电子</div>
            <div class="buju">
              <el-form-item label="0.2-0.3MeV" prop="e1">
                <el-input v-model="formAdd.e1"></el-input>
              </el-form-item>
              <el-form-item label="0.3-0.4MeV" prop="e2">
                <el-input v-model="formAdd.e2"></el-input>
              </el-form-item>
              <el-form-item label="0.4-0.5MeV" prop="e3">
                <el-input v-model="formAdd.e3"></el-input>
              </el-form-item>
              <el-form-item label="0.5-0.6MeV" prop="e4">
                <el-input v-model="formAdd.e4"></el-input>
              </el-form-item>
              <el-form-item label="0.6-0.8MeV" prop="e5">
                <el-input v-model="formAdd.e5"></el-input>
              </el-form-item>
              <el-form-item label="0.8-1.0MeV" prop="e6">
                <el-input v-model="formAdd.e6"></el-input>
              </el-form-item>
            </div>
          </div>
          <div class="form_proton">
            <div class="title_table">高能质子</div>
            <div class="buju">
              <el-form-item label="0.2-0.3MeV" prop="p1">
                <el-input v-model="formAdd.p1"></el-input>
              </el-form-item>
              <el-form-item label="0.3-0.4MeV" prop="p2">
                <el-input v-model="formAdd.p2"></el-input>
              </el-form-item>
              <el-form-item label="0.4-0.5MeV" prop="p3">
                <el-input v-model="formAdd.p3"></el-input>
              </el-form-item>
              <el-form-item label="0.5-0.6MeV" prop="p4">
                <el-input v-model="formAdd.p4"></el-input>
              </el-form-item>
              <el-form-item label="0.6-0.8MeV" prop="p5">
                <el-input v-model="formAdd.p5"></el-input>
              </el-form-item>
              <el-form-item label="0.8-1.0MeV" prop="p6">
                <el-input v-model="formAdd.p6"></el-input>
              </el-form-item>
            </div>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" class="bg_button" @click="dialogAdd = false"
            >取 消</el-button
          >
          <el-button
            size="small"
            class="bg_button"
            type="primary"
            @click="addInfo('from')"
            >确 认</el-button
          >
        </div>
      </el-dialog>
    </div>
    <!-- 改 -->
    <div class="update">
      <el-dialog :visible.sync="dialogUpdate" width="1047px" height="395px">
        <div slot="title" class="dialog-title">
          <el-row class="red">
            <span class="dialog-title-text">修改</span>
            <span class="dialog-title-you"></span>
            <!-- <el-button type="primary" style="float:right" @click="edit_pr">编辑</el-button> -->
          </el-row>
        </div>
        <el-form :model="formUpdate" label-width="120px" ref="form">
          <div class="form_time">
            <el-form-item label="世界时间" prop="utc">
              <el-date-picker
                v-model="formUpdate.utc"
                type="datetime"
                placeholder="选择日期时间"
                default-time="12:00:00"
                @blur="addTime"
                disabled
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="北京时间" prop="dayHhmmss">
              <el-input v-model="formUpdate.dayHhmmss" disabled></el-input>
            </el-form-item>
          </div>
          <div class="form_coordinate">
            <el-form-item label="精度(°)" prop="lon">
              <el-input v-model="formUpdate.lon"></el-input>
            </el-form-item>
            <el-form-item label="纬度(°)" prop="lat">
              <el-input v-model="formUpdate.lat"></el-input>
            </el-form-item>
            <el-form-item label="高度(m)" prop="alt">
              <el-input v-model="formUpdate.alt"></el-input>
            </el-form-item>
          </div>
          <div class="form_electron">
            <div class="title_table">高能电子</div>
            <div class="buju">
              <el-form-item label="0.2-0.3MeV" prop="e1">
                <el-input v-model="formUpdate.e1"></el-input>
              </el-form-item>
              <el-form-item label="0.3-0.4MeV" prop="e2">
                <el-input v-model="formUpdate.e2"></el-input>
              </el-form-item>
              <el-form-item label="0.4-0.5MeV" prop="e3">
                <el-input v-model="formUpdate.e3"></el-input>
              </el-form-item>
              <el-form-item label="0.5-0.6MeV" prop="e4">
                <el-input v-model="formUpdate.e4"></el-input>
              </el-form-item>
              <el-form-item label="0.6-0.8MeV" prop="e5">
                <el-input v-model="formUpdate.e5"></el-input>
              </el-form-item>
              <el-form-item label="0.8-1.0MeV" prop="e6">
                <el-input v-model="formUpdate.e6"></el-input>
              </el-form-item>
            </div>
          </div>
          <div class="form_proton">
            <div class="title_table">高能质子</div>
            <div class="buju">
              <el-form-item label="0.2-0.3MeV" prop="p1">
                <el-input v-model="formUpdate.p1"></el-input>
              </el-form-item>
              <el-form-item label="0.3-0.4MeV" prop="p2">
                <el-input v-model="formUpdate.p2"></el-input>
              </el-form-item>
              <el-form-item label="0.4-0.5MeV" prop="p3">
                <el-input v-model="formUpdate.p3"></el-input>
              </el-form-item>
              <el-form-item label="0.5-0.6MeV" prop="p4">
                <el-input v-model="formUpdate.p4"></el-input>
              </el-form-item>
              <el-form-item label="0.6-0.8MeV" prop="p5">
                <el-input v-model="formUpdate.p5"></el-input>
              </el-form-item>
              <el-form-item label="0.8-1.0MeV" prop="p6">
                <el-input v-model="formUpdate.p6"></el-input>
              </el-form-item>
            </div>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button
            size="small"
            class="bg_button"
            @click="dialogUpdate = false"
            >取 消</el-button
          >
          <el-button
            size="small"
            class="bg_button"
            type="primary"
            @click="updateInfo()"
            >确 认</el-button
          >
        </div>
      </el-dialog>
    </div>
    <!-- 删 -->
    <div class="deletes">
      <el-dialog :visible.sync="dialogDeletes" width="1047px" height="395px">
        <div slot="title" class="dialog-title">
          <el-row class="red">
            <span class="dialog-title-text">删除</span>
            <span class="dialog-title-you"></span>
            <!-- <el-button type="primary" style="float:right" @click="edit_pr">编辑</el-button> -->
          </el-row>
        </div>
        <el-form :model="formDeletes" label-width="120px" ref="form">
          <div class="form_time">
            <el-form-item label="世界时间" prop="utc">
              <el-date-picker
                v-model="formDeletes.utc"
                type="datetime"
                placeholder="选择日期时间"
                default-time="12:00:00"
                @blur="addTime"
                disabled
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="北京时间" prop="dayHhmmss">
              <el-input v-model="formDeletes.dayHhmmss" disabled></el-input>
            </el-form-item>
          </div>
          <div class="form_coordinate">
            <el-form-item label="精度(°)" prop="lon">
              <el-input v-model="formDeletes.lon" disabled></el-input>
            </el-form-item>
            <el-form-item label="纬度(°)" prop="lat">
              <el-input v-model="formDeletes.lat" disabled></el-input>
            </el-form-item>
            <el-form-item label="高度(m)" prop="alt">
              <el-input v-model="formDeletes.alt" disabled></el-input>
            </el-form-item>
          </div>
          <div class="form_electron">
            <div class="title_table">高能电子</div>
            <div class="buju">
              <el-form-item label="0.2-0.3MeV" prop="e1">
                <el-input v-model="formDeletes.e1" disabled></el-input>
              </el-form-item>
              <el-form-item label="0.3-0.4MeV" prop="e2">
                <el-input v-model="formDeletes.e2" disabled></el-input>
              </el-form-item>
              <el-form-item label="0.4-0.5MeV" prop="e3">
                <el-input v-model="formDeletes.e3" disabled></el-input>
              </el-form-item>
              <el-form-item label="0.5-0.6MeV" prop="e4">
                <el-input v-model="formDeletes.e4" disabled></el-input>
              </el-form-item>
              <el-form-item label="0.6-0.8MeV" prop="e5">
                <el-input v-model="formDeletes.e5" disabled></el-input>
              </el-form-item>
              <el-form-item label="0.8-1.0MeV" prop="e6">
                <el-input v-model="formDeletes.e6" disabled></el-input>
              </el-form-item>
            </div>
          </div>
          <div class="form_proton">
            <div class="title_table">高能质子</div>
            <div class="buju">
              <el-form-item label="0.2-0.3MeV" prop="p1">
                <el-input v-model="formDeletes.p1" disabled></el-input>
              </el-form-item>
              <el-form-item label="0.3-0.4MeV" prop="p2">
                <el-input v-model="formDeletes.p2" disabled></el-input>
              </el-form-item>
              <el-form-item label="0.4-0.5MeV" prop="p3">
                <el-input v-model="formDeletes.p3" disabled></el-input>
              </el-form-item>
              <el-form-item label="0.5-0.6MeV" prop="p4">
                <el-input v-model="formDeletes.p4" disabled></el-input>
              </el-form-item>
              <el-form-item label="0.6-0.8MeV" prop="p5">
                <el-input v-model="formDeletes.p5" disabled></el-input>
              </el-form-item>
              <el-form-item label="0.8-1.0MeV" prop="p6">
                <el-input v-model="formDeletes.p6" disabled></el-input>
              </el-form-item>
            </div>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button
            size="small"
            class="bg_button"
            @click="dialogDeletes = false"
            >取 消</el-button
          >
          <el-button
            size="small"
            class="bg_button"
            type="primary"
            @click="deletesInfo()"
            >确 认</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { post } from "@/utils/request";
export default {
  name: "KjzElectronProtonFlux",
  data() {
    return {
      showData: [], // 后台获取的数据放这
      pageSize: 9, // 一页多少条数据
      pageNum: 1, // 分页的第几页
      total: null, // 获取所有数据
      dialogAdd: false, // 控制新增弹窗的显示隐藏
      dialogUpdate: false, // 控制修改弹窗的显示隐藏
      dialogDeletes: false, // 控制删除弹窗的显示隐藏
      currentTime: "", // 系统当前时间
      loading: true, // 加载
      data_type: "", // 传递过来的时间
      form: {
        setTime: "", // 搜索的开始时间
        endTime: "", // 搜索的结束时间
      },
      formAdd: {
        // 可添加的所有字段
        alt: "",
        dayHhmmss: "",
        e1: "",
        e2: "",
        e3: "",
        e4: "",
        e5: "",
        e6: "",
        lat: "",
        lon: "",
        p1: "",
        p2: "",
        p3: "",
        p4: "",
        p5: "",
        p6: "",
        utc: "",
      },
      formUpdate: {
        // 修改
        alt: "",
        dayHhmmss: "",
        e1: "",
        e2: "",
        e3: "",
        e4: "",
        e5: "",
        e6: "",
        lat: "",
        lon: "",
        p1: "",
        p2: "",
        p3: "",
        p4: "",
        p5: "",
        p6: "",
        utc: "",
      },
      formDeletes: {
        // 修改
        alt: "",
        dayHhmmss: "",
        e1: "",
        e2: "",
        e3: "",
        e4: "",
        e5: "",
        e6: "",
        lat: "",
        lon: "",
        p1: "",
        p2: "",
        p3: "",
        p4: "",
        p5: "",
        p6: "",
        utc: "",
      },
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.data_type = this.$route.query.item;
      if (this.data_type) {
        this.form.setTime = this.data_type;
        this.form.endTime = this.shijianc(new Date());
        this.getKjzElectronProtonFlux();
      } else {
        this.getKjzElectronProtonFlux();
      }
    },
    getKjzElectronProtonFlux() {
      let params;
      if (this.form.setTime && this.form.endTime) {
        params = {
          bgnDt: this.form.setTime,
          endDt: this.form.endTime,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        };
      } else {
        params = {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        };
      }
      console.log(params);
      post("/api/idatamanage/govData/queryKjzElectronProtonFlux", params).then(
        (res) => {
          console.log(res);
          this.showData = res.data.data.dataList;
          this.total = res.data.data.total;
          this.loading = false;
        }
      );
    },
    tableCellClassName({ row, column, rowIndex, columnIndex }) {
      row.index = rowIndex;
      column.index = columnIndex;
    },
    handleCurrentChange(pageNum) {
      this.listLoading = true;
      this.pageNum = pageNum;
      //   console.log(this.pageNum); //点击第几页
      this.getKjzElectronProtonFlux();
    },
    shijianc(time) {
      let date = new Date(time);
      let Y = date.getFullYear() + "-";
      let M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      let h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      let m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      let s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    },
    add() {
      //   console.log("新增弹窗");
      this.dialogAdd = true;
    },
    addTime() {
      let arr = this.formAdd.utc;
      this.formAdd.utc = this.shijianc(this.formAdd.utc);
      arr.setTime(arr.getTime() + 3600 * 1000 * 8);
      this.formAdd.dayHhmmss = this.shijianc(arr);
    },
    addInfo() {
      let params = this.formAdd;
      post("/api/idatamanage/govData/addKjzElectronProtonFlux", params).then(
        (res) => {
          //   console.log(res);
          if (res.data.message == "成功") {
            this.$message({
              message: "新增成功",
              type: "success",
            });
            this.getKjzElectronProtonFlux();
            this.dialogAdd = false;
            // 可添加的所有字段
            this.formAdd.alt = "";
            this.formAdd.dayHhmmss = "";
            this.formAdd.e1 = "";
            this.formAdd.e2 = "";
            this.formAdd.e3 = "";
            this.formAdd.e4 = "";
            this.formAdd.e5 = "";
            this.formAdd.e6 = "";
            this.formAdd.lat = "";
            this.formAdd.lon = "";
            this.formAdd.p1 = "";
            this.formAdd.p2 = "";
            this.formAdd.p3 = "";
            this.formAdd.p4 = "";
            this.formAdd.p5 = "";
            this.formAdd.p6 = "";
            this.formAdd.utc = "";
          } else {
            this.$message.error("新增失败");
          }
        }
      );
    },
    update(row) {
      //   console.log("修改弹窗", row);
      this.dialogUpdate = true;
      this.formUpdate = row;
    },
    updateInfo() {
      let params = this.formUpdate;
      post("/api/idatamanage/govData/updateKjzElectronProtonFlux", params).then(
        (res) => {
          if (res.data.message == "成功") {
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.getKjzElectronProtonFlux();
            this.dialogUpdate = false;
          } else {
            this.$message.error("修改失败");
          }
        }
      );
    },
    deletes(row) {
      //   console.log("删除弹窗");
      this.formDeletes = row;
      this.dialogDeletes = true;
    },
    deletesInfo() {
      let params = this.formDeletes;
      post("/api/idatamanage/govData/deleteKjzElectronProtonFlux", params).then(
        (res) => {
          if (res.data.message == "成功") {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.getKjzElectronProtonFlux();
            this.dialogDeletes = false;
          } else {
            this.$message.error("删除失败");
          }
        }
      );
    },
    ComplementZero(res) {
      if (res < 10) {
        return "0" + res;
      } else {
        return res;
      }
    },
    searchInfo() {
      this.loading = true;
      if (this.form.setTime && this.form.endTime) {
        if (this.form.setTime < this.form.endTime) {
          this.getKjzElectronProtonFlux();
        } else {
          this.$message("时间范围错误");
          this.loading = false;
        }
      } else {
        const date = new Date().getTime();
        const bgnDate = new Date(date), // 结束时间
          bgnY = bgnDate.getFullYear() + "-",
          bgnM = this.ComplementZero(bgnDate.getMonth() + 1) + "-",
          bgnD = this.ComplementZero(bgnDate.getDate()) + " ",
          bgnh = this.ComplementZero(bgnDate.getHours()) + ":",
          bgnm = this.ComplementZero(bgnDate.getMinutes()) + ":",
          bgns = this.ComplementZero(bgnDate.getSeconds());
        const bgnTime = bgnY + bgnM + bgnD + bgnh + bgnm + bgns;

        const halfYear = (365 / 2) * 24 * 3600 * 1000;
        const pastResult = date - halfYear;
        const pastDate = new Date(pastResult), // 开始时间
          endY = pastDate.getFullYear() + "-",
          endM = this.ComplementZero(pastDate.getMonth() + 1) + "-",
          endD = this.ComplementZero(pastDate.getDate()) + " ",
          endh = this.ComplementZero(pastDate.getHours()) + ":", //获取当前小时数(0-23)
          endm = this.ComplementZero(pastDate.getMinutes()) + ":", //获取当前分钟数(0-59)
          ends = this.ComplementZero(pastDate.getSeconds()); //获取当前秒数(0-59)
        const endTime = endY + endM + endD + endh + endm + ends; // 默认获取一年前 到现在的数据
        this.form.setTime = endTime;
        this.form.endTime = bgnTime;
        this.getKjzElectronProtonFlux();
      }
    },
    resettingInfo() {
      this.loading = true;
      this.form.setTime = "";
      this.form.endTime = "";
      this.getKjzElectronProtonFlux();
    },
  },
};
</script>

<style src="../../../assets/css/common.css"></style>
<style lang="scss" scoped>
.main {
  // 最外层的盒子
  font-family: "宋体";
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  height: 85vh;

  .add {
    .form_time {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      .el-form-item {
        width: 48%;
        ::v-deep .el-input__inner {
          width: 300px !important;
        }
      }
    }
    .form_coordinate {
      display: flex;
      align-items: center;
      justify-content: space-around;
      .el-form-item {
        width: 30%;
      }
    }
    .form_electron {
      .buju {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
        ::v-deep .el-form-item {
          width: 30%;
          .el-form-item {
            .el-form-item__content {
              .el-input {
                width: 40px;
              }
            }
          }
        }
      }
    }
    .form_proton {
      .buju {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
        ::v-deep .el-form-item {
          width: 30%;
          .el-form-item {
            .el-form-item__content {
              .el-input {
                width: 40px;
              }
            }
          }
        }
      }
    }
    .dialog-footer {
      width: 30%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
    }
  }
  .update {
    .form_time {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      .el-form-item {
        width: 48%;
        ::v-deep .el-input__inner {
          width: 300px !important;
        }
      }
    }
    .form_coordinate {
      display: flex;
      align-items: center;
      justify-content: space-around;
      .el-form-item {
        width: 30%;
      }
    }
    .form_electron {
      .buju {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
        ::v-deep .el-form-item {
          width: 30%;
          .el-form-item {
            .el-form-item__content {
              .el-input {
                width: 40px;
              }
            }
          }
        }
      }
    }
    .form_proton {
      .buju {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
        ::v-deep .el-form-item {
          width: 30%;
          .el-form-item {
            .el-form-item__content {
              .el-input {
                width: 40px;
              }
            }
          }
        }
      }
    }
    .dialog-footer {
      width: 30%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
    }
  }
  .deletes {
    .form_time {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      .el-form-item {
        width: 48%;
        ::v-deep .el-input__inner {
          width: 300px !important;
        }
      }
    }
    .form_coordinate {
      display: flex;
      align-items: center;
      justify-content: space-around;
      .el-form-item {
        width: 30%;
      }
    }
    .form_electron {
      .buju {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
        ::v-deep .el-form-item {
          width: 30%;
          .el-form-item {
            .el-form-item__content {
              .el-input {
                width: 40px;
              }
            }
          }
        }
      }
    }
    .form_proton {
      .buju {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
        ::v-deep .el-form-item {
          width: 30%;
          .el-form-item {
            .el-form-item__content {
              .el-input {
                width: 40px;
              }
            }
          }
        }
      }
    }
    .dialog-footer {
      width: 30%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
    }
  }
}
.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.btnzu {
  display: flex;
  width: 180px;
  margin: 0 0 0 30px;

  .footer_left {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    div {
      width: 100px;
      .bg_add {
        padding: 9px 15px;
        background: rgb(4, 119, 166);
        color: #fff;
        border: none;
      }
      .bg_add:hover {
        color: rgb(132, 242, 255);
      }
      .bg_dao {
        padding: 9px 15px;
        background: rgb(4, 119, 166);
        color: #fff;
        border: none;
      }
      .bg_dao:hover {
        color: #e6a23c;
      }
    }
  }
}
::v-deep .el-table__fixed-right::before {
  background: transparent !important;
}
::v-deep .el-table--border::after,
.el-table--group::after {
  background: transparent !important;
}

::v-deep .el-table {
  th {
    background-color: red($color: #000000) !important;
  }
}
.el-form-item__label {
  color: #fff !important;
  font-size: 18px !important;
}

::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: rgb(8, 79, 140) !important;
}

// ::v-deep .el-table .cell {
//   font-size: 18px;
//   color: #c4d1dd;
// }
.div-el-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.el-table::before {
  content: "";
  position: absolute;
  background-color: transparent;
  z-index: 1;
}
::v-deep .el-table tr {
  background-color: transparent;
}

// .el-dialog {
//   background-color: rgba(8, 79, 140, 1);
// }
::v-deep .el-table--striped {
  .el-table__body {
    tr.el-table__row--striped {
      td.el-table__cell {
        background: #0077a9;
      }
    }
  }
}

::v-deep .el-input__icon {
  line-height: 32px;
}
::v-deep .el-table--border,
.el-table--group {
  border: none;
}
::v-deep .el-table--border .el-table__cell {
  border-top: 1px solid #ebeef5;
  font-size: 14px;
}
::v-deep .el-button + .el-button {
  margin: 0;
}
.title_table {
  color: #84f2ff;
  font-size: 18px;
}
</style>